<template>
	<view class="app">
		<view class="left-top-sign">LOGIN</view>
		<view class="welcome">登录系统</view>
		
		<!-- 登录输入框 -->
		<view class="cpm-input">
			<view class="cpm-input-item">
				<text class="item-title">账号</text>
				<view class="item-input">
					<input v-model="username" type="text" maxlength="20" placeholder="请输入账号" placeholder-style="color: #909399"/>
				</view>
			</view>
			<view class="cpm-input-item">
				<text class="item-title">登录密码</text>
				<view class="item-input">
					<input class="item-input" v-model="user_pwd" type="number" maxlength="12" placeholder="请输入登录密码" placeholder-style="color: #909399"/>
				</view>
			</view>
		</view>
		<button class="cpm-btn1" @click="loginByPassword()">登录</button>
		<br>
		<button class="cpm-btn2" @click="enroll()">注册</button>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				username: '12345',//用户名
				user_pwd: '123456', //登录密码
			}
		},
		
		onLoad() {
			this.isLogin();
		},
		methods: {
			enroll(){
				this.$router.replace('/pages/user/enroll/enroll')
			},
			/**
			 * 访问登录页面的时候如果已登录就跳转到首页
			 */
			isLogin() {
				if(this.hasLogin){
					uni.switchTab({
						url: '/pages/tabbar/user'
					})
				}
			},			
			/**
			 * 密码登录
			 */
			async loginByPassword(){
				// const {username, user_pwd} = this;
				// //输入参数是否为空验证
				if (this.username.length == "") {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					});
				}
				else if (this.user_pwd.length == "") {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					});
				}
				else{
					uni.request({
						url:'/api/api/login_ac',
						success: (res) => {
							var arr = [];
							for(var i=0;i<res.data.length;i++){
								arr[i] = res.data[i].account
							}
							if(arr.includes(this.username)){
								uni.request({
									url:'/api/api/login_ps',
									method:'POST',
									data:{account:this.username},
									 success: (res) => {
									    if(this.user_pwd == res.data[0].password){
											uni.showToast({
												title:"登陆成功"
											})
											sessionStorage.setItem("isLogin",0)
											uni.reLaunch({
												url: '/pages/index/index'
											})
											uni.setStorageSync('account', this.username);
										} else {
											uni.showToast({
												title:"密码错误"
											})
										}
									}
								})
							} else {
								uni.showToast({
									title: '账号不存在',
									icon: 'none'
								});
							}
						}
					})
				}
				
			}
			
		}
	}
</script>

<style>
	.zhu{
		margin-left: 170px;
		font-size: 15px;
	}
	.cpm-btn1{
		width: 80%;
		color: #ffffff;
		font-weight: 900;
		font-size: 20px;
		background-color: #318eff;
	}
	.cpm-btn2{
		width: 80%;
		color: #ffffff;
		font-weight: 900;
		font-size: 20px;
		background-color: #318eff;
	}
	.app{
		padding-top: 4vh;
		position:relative;
		width: 100vw;
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 60px);
		/* #endif */
		overflow: hidden;
		background: #fff;
	}
	.left-top-sign{
		font-size: 120rpx;
		color: #f8f8f8;
		position:relative;
		left: 16rpx;
	}
	.welcome{
		position:relative;
		left: 70rpx;
		top: -70rpx;
		font-size: 48rpx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	/* 登录输入框 */
	.cpm-input{
		padding: 0 60rpx;
	}
	.cpm-input .cpm-input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;
		
			
	}
	.cpm-input .cpm-input-item .item-input{
		width: 100%;
	}
	input{
		flex: 1;
		height: 60rpx;
		font-size: 30rpx;
		color: #303133;
		width: 100%;
	}
	.cpm-input .cpm-input-item .item-title{
		height: 50rpx;
		line-height: 56rpx;
		font-size: 26rpx;
		color: #606266;
	}
</style>
